<p fxLayout="row" fxLayoutGap="10px">
  <button mat-raised-button color="primary" (click)="onAddClick($event.target)">添加</button>
  <app-nav-back></app-nav-back><app-nav-dashboard></app-nav-dashboard>
</p>
<table mat-table #table [dataSource]="dataSource" matSort class="mat-elevation-z8">
  <ng-container matColumnDef="selector">
    <th mat-header-cell *matHeaderCellDef>--</th>
    <td mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
      <mat-checkbox [(ngModel)]="row.selected"></mat-checkbox>
    </td>
  </ng-container>

  <!-- Id Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>id</th>
    <td mat-cell *matCellDef="let row">{{row.id}}</td>
  </ng-container>
  <!-- navi to detail Column -->
  <ng-container matColumnDef="detail">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>--</th>
    <td mat-cell *matCellDef="let row">
      <button mat-icon-button (click)="selectRow($event.target, row)">
        <mat-icon>info</mat-icon>
      </button>
    </td>
  </ng-container>
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 姓名 </th>
    <td mat-cell *matCellDef="let row">{{row.lastName+row.firstName}}</td>
  </ng-container>

  <!-- Level Column -->
  <ng-container matColumnDef="identityId">
    <th mat-header-cell *matHeaderCellDef> 证件号 </th>
    <td mat-cell *matCellDef="let row"> {{row.identityId}}</td>
  </ng-container>

  <!-- Gender Column -->
  <ng-container matColumnDef="gender">
    <th mat-header-cell *matHeaderCellDef> 性别 </th>
    <td mat-cell *matCellDef="let row">{{row.gender | genderrr}}</td>
  </ng-container>

  <!-- Mobile Column -->
  <ng-container matColumnDef="mobile">
    <th mat-header-cell *matHeaderCellDef> 联系电话 </th>
    <td mat-cell *matCellDef="let row"> {{row.phoneNumber}}</td>
  </ng-container>

  <!-- Busy Column -->
  <ng-container matColumnDef="busy">
    <th mat-header-cell *matHeaderCellDef> 工作中 </th>
    <td mat-cell *matCellDef="let row"> {{row.busy}}</td>
  </ng-container>

  <!-- Level Column -->
  <ng-container matColumnDef="level">
    <th mat-header-cell *matHeaderCellDef> 等级 </th>
    <td mat-cell *matCellDef="let row"> {{row.level}}</td>
  </ng-container>

  <ng-container matColumnDef="oper">
    <th mat-header-cell *matHeaderCellDef>--</th>
    <td mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
      <div fxLayout="row" fxLayoutGap="10px">
        <button mat-raised-button (click)="onDeleteClicked($event.target, row)">删除</button>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator #paginator [showFirstLastButtons]="true"
               [length]="washers.length"
               [pageIndex]="0"
               [pageSize]="25"
               [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
